<template>
  <el-container class="layout-container-demo" style="height: 57rem">
    <el-aside style="height: 100%;" width="220px">
      <AsideAdmin v-show="IsAdmin.isAdmin"/>
      <AsideUser v-show="!IsAdmin.isAdmin"/>
    </el-aside>

    <el-container>
      <el-header height="60px" style="background-color: white; font-size: 24px">

        <div class="toolbar" style="margin:0 40px">
          <div class="left" style="font-size: 40px">
            <span style="font-weight: bolder">Capgemini</span>项目管理系统
          </div>
          <div class="middle">

          </div>
          <div class="right">
            <div style="display: inline">{{ item.name }}</div>
            <el-dropdown>
              <el-icon size="30px" style="margin-left: 10px;display: inline;">
                <UserFilled/>
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="CloseBold" @click="exit">退出登录</el-dropdown-item>
                  <el-dropdown-item :icon="House" @click="toUserInfo">个人信息</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <HomeMain/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import AsideAdmin from '@/components/home/AsideAdmin.vue'
import HomeMain from '@/components/home/body/HomeMain.vue'
import {useUserInfoStore} from '@/stores/User/UserInfo'
import {useIsAdmin} from '@/stores/Person/IsAdmin'

import {CloseBold, House} from '@element-plus/icons-vue'
import router from '@/router'

const IsAdmin = useIsAdmin()
const userInfoStore = useUserInfoStore()

const toUserInfo = () => {
  router.push('/home/userinfo')
}
const exit = () => {
  sessionStorage.clear()
  router.push('/login')
}

const item = {
  name: userInfoStore.userName ? userInfoStore.userName : ''
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}


.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.toolbar .right {
  font-size: 30px;
  flex: 1;
  text-align: right;
  right: 20px;
}

.toolbar .left {
  flex: 7;
  left: 20px;
}

.toolbar .middle {
  flex: 0;
}
</style>
